<template>
  <cu-layout :navProp="{ placeholder: true, title: title }" :bgStyle="{ color: '#ffffff' }">
    <view :class="[`${prefixCls}-repair-process-container`]" :style="[{ 'padding-bottom': stepIndex === 0 ? '0' : '100rpx' }]">
      <template v-if="stepIndex === 0">
        <template v-if="list && list.length === 0">
          <cu-empty mode="list" text="没有可报修物品"> </cu-empty>
        </template>
        <template v-else>
          <uv-vtabs :chain="true" :list="list" :height="height" hdHeight="100rpx">
            <template v-for="(item, index) in list" :key="index">
              <uv-vtabs-item :index="index">
                <view class="title">
                  {{ item.name }}
                </view>
                <view class="item" v-for="(item2, index2) in item.childrens" :key="index2">
                  <view class="item-content" @click="handleSeletd(item2)">
                    <image class="icon" :src="item2.url"></image>
                    <text class="text">{{ item2.name }}</text>
                  </view>
                </view>
              </uv-vtabs-item>
            </template>
            <uv-gap bg-color="#fff" height="600"></uv-gap>
          </uv-vtabs>
        </template>
      </template>
      <template v-else-if="stepIndex === 1">
        <view class="fault-row">
          <image class="image" :src="form.url"></image>
          <view class="name">{{ form.name }}</view>
        </view>
        <view class="fault-row">
          <view class="title">故障描述</view>
          <view class="tag-wrap">
            <view :class="['tag-item', { active: form.activeIndex === index }]" v-for="(item, index) in form.tags" :key="index" @click="handleSelectTag(index)">{{ item }}</view>
          </view>
          <uv-textarea v-model="form.remark" placeholder="请输入故障描述"></uv-textarea>
        </view>
        <view class="fault-row">
          <view class="title">故障照片或视频</view>
          <view class="desc">添加故障照片或者视频，更方便定位您的问题哦</view>
        </view>
        <view class="example-body">
          <cu-uploader v-model="form.images" :limit="4"></cu-uploader>
          <cu-uploader fileMediatype="video" fileAcceptType="uploadMp4" v-model="form.video" :limit="1"></cu-uploader>
        </view>
      </template>
      <template v-else-if="stepIndex === 2">
        <view class="fault-row">
          <image class="image" :src="form.url"></image>
          <view class="fault-info">
            <view class="name">{{ form.name }}</view>
            <view class="desc">{{ form.tags[form.activeIndex] }}</view>
          </view>
        </view>
        <view class="fault-row">
          <view class="title">报修房间</view>
          <view class="">{{ form.room_name }}</view>
        </view>
        <view class="fault-row fault-date">
          <view class="title"> <text class="start">*</text> 意向维修时间</view>
          <view class="desc">实际维修时间以门店联系为准</view>
          <view class="picker">
            <uv-icon class="icon" name="calendar"></uv-icon>
            <picker
              style="width: 100%"
              @change="changePickerUnit($event)"
              @columnchange="columnchange($event)"
              :value="indexUnit"
              :range="unitList"
              range-key="title"
              mode="multiSelector"
            >
              <view :class="[pickerValue.length ? 'color-black' : 'color-default']">
                {{ pickerName }}
              </view>
            </picker>
          </view>
        </view>
        <view class="fault-row">
          <view class="title"> <text class="start">*</text> 家中无人是否可以进门维修</view>
          <view class="desc">如果可以，管家使用临时密码进门维修，更快为您解决问题哦</view>
          <view class="tag-wrap">
            <view :class="['tag-item', { active: form.is_enter === item.value }]" v-for="(item, index) in is_enterList" :key="index" @click="handleSelectEnter(item)">
              {{ item.name }}
            </view>
          </view>
        </view>
        <view class="fault-row">
          <view class="title">联系电话</view>
          <uv-input placeholder="请输入联系电话" :customStyle="{ padding: 0 }" border="bottom" v-model="form.tel" maxlength="11"></uv-input>
        </view>
      </template>
    </view>
    <view class="footer" v-if="stepIndex != 0">
      <view class="button-wrap">
        <view :class="['button hollow-out']" @click="handleNuxt(0)">上一步</view>
        <view v-if="stepIndex === 1" :class="['button', { diabled: !isSetp }]" @click="handleNuxt(1)">下一步</view>
        <view v-if="stepIndex === 2" :class="['button', { diabled: !isSubmit }]" @click="submit()">提交</view>
      </view>
      <uv-safe-bottom></uv-safe-bottom>
    </view>
    <uv-modal ref="modal" title="提交成功" :content="submitMessage" @confirm="popupClose" :confirmColor="theme"></uv-modal>
  </cu-layout>
</template>

<script>
import { mapActions, mapGetters } from 'vuex'
import { getProjectItems, getWillTime, postRepair } from './api'

export default {
  name: 'repair-process',
  components: {},
  mixins: [],
  props: {},
  data() {
    return {
      stepIndex: 0,
      title: '',
      list: [],
      is_enterList: [
        { name: '可以', value: '1' },
        { name: '不可以', value: '0' },
      ],
      pickerValue: [],
      pickerName: '请选择意向维修时间',
      pickerValue: [],
      unitList: [],
      indexUnit: 0,
      form: {
        remark: '',
        images: [],
        video: [],
        activeIndex: '',
        tel: '',
        is_enter: '',
      },
      submitMessage: '',
    }
  },
  // 侦听属性
  watch: {
    stepIndex: {
      handler(oldVal) {
        switch (oldVal) {
          case 0:
            this.title = '选择物品'
            this.getProjectItems()
            break
          case 1:
            this.title = '故障描述'
            break
          case 2:
            this.title = '提交报修'
            this.form.tel = this.userInfo.phone
            this.getTimeData()
            break
          default:
            break
        }
      },
    },
  },
  // 计算属性
  computed: {
    ...mapGetters(['userInfo', 'theme']),
    height() {
      return uni.getSystemInfoSync().windowHeight - this.$Platform.navbar
    },
    isSetp() {
      if (this.form.activeIndex === this.form.tags.length - 1 && !this.form.remark) {
        return false
      }
      return this.form.activeIndex !== '' && (this.form.images.length !== 0 || this.form.video.length !== 0)
    },
    isSubmit() {
      return this.form.tel && this.form.is_enter && this.pickerValue.length > 0
    },
  },
  // 监听页面加载，该钩子被调用时data,computed,function,watch,props,slots已设置完成
  onLoad(options) {
    this.title = '选择物品'
    this.getProjectItems()
  },
  // 监听页面显示，页面每次出现在屏幕上都触发
  onShow() {},
  // 监听页面初次渲染完成，此时组件已挂载完成
  onReady() {},
  // 下拉刷新
  onPullDownRefresh() {},
  // 加载更多
  onReachBottom() {},

  created() {},
  mounted() {},
  destroyed() {},
  methods: {
    ...mapActions([]),
    async getProjectItems() {
      const { project_id } = this.$Route.query
      const { data } = await getProjectItems({ project_id })
      this.list = data.map((v) => {
        return {
          name: v.key,
          childrens: v.value,
        }
      })
    },
    handleSeletd({ id, name, remark: tags, url }) {
      const form = {
        ...this.$Route.query,
        id,
        name,
        tags,
        url,
      }
      console.log('form', form)
      this.form = { ...form, ...this.form }
      this.form.tags.push('其他')
      this.stepIndex++
    },
    handleSelectTag(index) {
      this.form.activeIndex = index
    },
    handleSelectEnter({ value }) {
      this.form.is_enter = value
    },
    handleNuxt(value) {
      if (value && !this.isSetp) return
      if (value) {
        this.stepIndex++
      } else {
        this.stepIndex--
      }
    },
    async getTimeData() {
      const { project_id } = this.$Route.query
      const { data } = await getWillTime({ project_id })
      this.timeData = data
      this.unitList = []
      const dateValue = [] // 日期数组
      const timeValue = []
      data.forEach((v, i) => {
        // 如果为0 则添加 time 数据
        if (i === 0) {
          v.time.forEach((item) => {
            timeValue.push({
              title: item.name,
              value: [item.start, item.end],
            })
          })
        }
        if (i < 3) {
          dateValue.push({
            title: `${v.date}(${v.remark})`,
            value: v.date,
          })
        } else {
          dateValue.push({
            title: v.remark ? v.remark : v.date,
            value: v.date,
          })
        }
      })
      this.unitList.push(dateValue)
      this.unitList.push(timeValue)
    },
    columnchange(e) {
      if (e.detail.column === 0) {
        const list = this.timeData[e.detail.value].time.map((v) => {
          return {
            title: v.name,
            value: [v.start, v.end],
          }
        })
        this.unitList[1] = list
      }
    },
    changePickerUnit(e) {
      const indexList = e.detail.value
      this.pickerValue = []
      this.pickerName = ''
      indexList.forEach((index, i) => {
        this.pickerValue.push(this.unitList[i][index].value)
        this.pickerName += `${this.unitList[i][index].title} `
      })
    },
    async submit() {
      if (!this.isSubmit) {
        return false
      }
      const { project_id } = this.$Route.query
      const { remark, room_id, images, video, tags, tel, is_enter, id, activeIndex } = this.form
      let data = {
        project_id,
        room_id,
        detail: tags[activeIndex],
        item_id: id,
        tel,
        date: this.pickerValue[0],
        start: this.pickerValue[1][0],
        end: this.pickerValue[1][1],
        is_enter,
        remark,
        video: '',
      }
      for (let i = 0; i < images.length; i++) {
        data['images[' + [i] + ']'] = images[i].url
      }
      data.video = video.length > 0 ? video[0].url : ''
      let { errcode, data: submitData } = await postRepair(data)
      if (errcode === 0) {
        this.submitMessage = submitData.msg
        this.$refs['modal'].open()
      }
    },
    popupClose() {
      this.$refs['modal'].close()
      uni.redirectTo({ url: '/pages/subpackage/repair/index' })
      // this.$ROUTE.go('/pages/subpackage/repair/index')
    },
  },
}
</script>
<style lang="scss">
.#{prefixCls('repair-process-container')} {
  .uv-vtabs-item {
    display: flex;
    flex-wrap: wrap;
    padding: 20rpx 0 0rpx;
    .item {
      width: calc(100% / 3);
      margin-bottom: 20rpx;
    }
    .title {
      flex-basis: 100%;
      margin-bottom: 20rpx;
      margin-left: 20rpx;
    }
  }
}
</style>
<style lang="scss" scoped>
page {
  background: white !important;
}
.#{prefixCls('repair-process-container')} {
  position: relative;
  box-sizing: border-box;
  overflow: hidden;
}
// .uv-vtabs-item {
//   display: flex;
//   flex-wrap: wrap;
//   padding: 20px 0;
//   .item {
//     width: calc(100% / 3);
//     // background: #f7f7f9;
//     margin-bottom: 20rpx;
//   }
// }
.item-content {
  display: flex;
  flex-direction: column;
  align-items: center;

  .icon {
    width: 150rpx;
    height: 150rpx;
  }
  .text {
    font-size: 24rpx;
    margin: 20rpx 0;
  }
}

.fault-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  background: white;
  padding: 20rpx;
  .fault-info {
    display: flex;
    flex-direction: column;
    .desc {
      margin: 20rpx;
    }
  }
  .picker {
    .icon {
      margin-right: 10rpx;
    }
    display: flex;
    margin: 20rpx 0 0;
    flex-basis: 100%;
    padding: 5px 10px;
    border: 2rpx solid #f1f1f1;
    border-radius: 8rpx;
  }
  .image {
    width: 90px;
    height: 90px;
  }
  .name {
    font-weight: bold;
    font-size: 24rpx;
    margin-left: 20rpx;
  }
  .title {
    flex-basis: 100%;
    font-weight: bold;
    font-size: 28rpx;
    margin: 10rpx 0 20rpx;
    .start {
      color: red;
    }
  }
  .tag-wrap {
    display: flex;
    flex-wrap: wrap;
    flex-basis: 100%;
    margin: 20rpx 0 0;
    .tag-item {
      font-weight: 300;
      margin-right: 20rpx;
      margin-bottom: 20rpx;
      font-size: 24rpx;
      border: 2rpx solid #f1f1f1;
      padding: 8rpx 15rpx;
      border-radius: 8rpx;
    }
    .active {
      background: $uv-primary;
      color: white;
    }
  }
  .desc {
    font-size: 24rpx;
  }
}
.fault-date {
  flex-wrap: wrap;
}
.example-body {
  padding: 20rpx;
}
.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  border-top: 2rpx solid #f1f1f1;
  background: white;
  padding: 10px 16px;
  box-sizing: border-box;
  .button-wrap {
    display: flex;
    .button {
      background: $uv-primary;
      font-size: 24rpx;
      color: white;
      flex: 1;
      padding: 10px 0;
      text-align: center;
      margin-left: 10px;
      &:first-child {
        margin-left: 0;
      }
    }
    .hollow-out {
      border: 2rpx solid $uv-primary;
      background: white;
      color: $uv-primary;
    }
    .diabled {
      background: #7f7f7f;
      color: white;
    }
  }
}
</style>
